<template>
  <div class="complexUploadCom">
    <template v-for="(uploadForm, index) in formData[item.prop]">
      <div class="container" :key="'container' + index">
        <el-form
          :key="'uploadForm' + index"
          class="uploadForm"
          :inline="true"
          :ref="'uploadForm' + index"
          label-width="auto"
        >
          <el-form-item label="附件类型">
            <el-select
              v-model="formData[item.prop][index]['enclosureType']"
              placeholder="请选择"
              :disabled="enclosureTypeDisabled(item.config, uploadForm, index)"
            >
              <el-option
                v-for="item in item.config.options"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述信息">
            <el-input
              v-model="formData[item.prop][index]['description']"
            ></el-input>
          </el-form-item>
          <upload-com
            class="fileUpload"
            :item="
              uploadConfig(item.config, formData[item.prop][index]['accept'])
            "
            :formData="formData[item.prop][index]"
          ></upload-com>
        </el-form>
        <div
          class="uploadOperation"
          :key="'uploadBtn' + index"
          v-if="item.config.showButtons"
        >
          <el-button
            type="success"
            @click="buttonFuc({ index, config: item.config, type: 'add' })"
            >新增</el-button
          >
          <el-button
            type="danger"
            @click="buttonFuc({ index, config: item.config, type: 'delete' })"
            >删除</el-button
          >
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import uploadCom from "./uploadCom";

export default {
  name: "titleToolBar",
  components: { uploadCom },
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    buttonFuc({ index, config, type }) {
      if (type == "add") {
        this.formData[this.item.prop].push({
          enclosureType: "", //文件类型
          description: "", //描述信息
          files: [],
          uploadedFiles: []
        });
      } else if (type == "delete") {
        this.formData[this.item.prop].splice(index, 1);
      }
      const item = this.item;
      const formData = this.formData;
      this.item.func({ index, config, type, item: item, formData: formData });
    },
    enclosureTypeDisabled(config, data, index) {
      const type = typeof config.enclosureTypeDisabled;
      if (type == "function") {
        return config.enclosureTypeDisabled({
          index: index,
          data: data
        });
      }
      return config.enclosureTypeDisabled;
    },
    uploadConfig(config, accept) {
      if (accept) {
        config.accept = accept;
        console.log(config);
      }
      return config;
    }
  }
};
</script>

<style scoped lang="scss">
.complexUploadCom {
  width: calc(100% - 64px);
  border: 1px solid #f1f2f6;
  margin: auto;
  margin-bottom: 15px;

  .container {
    display: flex;
    flex-direction: row;

    .uploadForm {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      flex: 1;

      ::v-deep .el-form-item {
        padding-left: 10px;
        width: calc(50% - 10px);
        display: flex;
        flex-direction: row;

        .el-form-item__content {
          flex: 1;
        }

        .el-input {
          width: 100%;
        }
      }

      .fileUpload {
        width: 100%;

        .uploadCom {
          width: 100%;
        }
      }
    }

    .uploadOperation {
      width: 100px;
      border-left: 1px solid white;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      background-color: #f1f2f6;

      .el-button + .el-button {
        margin-left: 0;
      }
    }
  }
}
</style>
